<template>
  <div>
    <div class="mobile-nav">
      <!-- 语言切换 -->
      <svg
        @click.stop="onClickToggleLanguageNav"
        class="language-switch mobile"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M8.21867 3V4.81128H12V9.99566H8.21867V13H6.70393V9.99566H3V4.81128H6.70393V3H8.21867ZM8.21867 6.2321V8.55314H10.4963V6.2321H8.21867ZM4.48157 8.55314H6.70393V6.2321H4.48157V8.55314Z"
          fill="black"
        />
        <path
          d="M18.2086 18.4427H14.6832L13.9251 21H12L15.3329 11H17.6671L21 21H18.9666L18.2086 18.4427ZM17.7273 16.8504L16.4519 12.5199L15.1644 16.8504H17.7273Z"
          fill="black"
        />
        <path
          d="M4 14V18C4 19.1046 4.89543 20 6 20H10M20 10V6C20 4.89543 19.1046 4 18 4H14"
          stroke="black"
          stroke-width="1.5"
        />
      </svg>
      <MobileLanguage v-model:visible="mobileLanguageNavVisible" />
      <!-- 显示用户头像 -->
      <div
        class="user-logo"
        @click.stop="clickUserLogo"
        v-if="memberStore.profile"
      >
        <img
          class="logo"
          v-logo-error
          :src="memberStore.profile?.headimgurl"
          alt=""
          v-if="memberStore.profile?.headimgurl"
        />
        <img
          class="logo"
          src="~/assets/images/user-logo/default_logo.jpg"
          alt=""
          v-else
        />
      </div>
      <IconUser
        v-else
        @click.stop="goto('/login')"
        class="mobile-header-icon"
      ></IconUser>
      <!-- 移动端显示个人中心导航栏 -->
      <ProfileNav v-model:visible="profileNavVisible" />
      <!-- 显示导航菜单 -->
      <IconMenu
        class="mobile-header-icon"
        @click.stop="onClickToggleNav"
      ></IconMenu>
      <MobileNav v-model:visible="mobileNavVisible" />
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  computed,
  defineAsyncComponent,
  onBeforeUnmount,
  onMounted,
  ref,
  watchEffect,
  watch,
} from "vue";
import { useMemberStore } from "../../../../../store";
import { useNuxtApp } from "nuxt/app";
const MobileNav = defineAsyncComponent(() => import("../MobileNav/Nav.vue"));
const ProfileNav = defineAsyncComponent(
  () => import("../MobileNav/ProfileNav.vue")
);
const MobileLanguage = defineAsyncComponent(
  () => import("../MobileNav/Language.vue")
);

const memberStore = useMemberStore();

// 切换语言
const mobileLanguageNavVisible = ref(false);
const onClickToggleLanguageNav = () => {
  mobileNavVisible.value = false;
  profileNavVisible.value = false;
  mobileLanguageNavVisible.value = !mobileLanguageNavVisible.value;
};

// 切换导航栏显示
const mobileNavVisible = ref(false);
const onClickToggleNav = () => {
  profileNavVisible.value = false;
  mobileLanguageNavVisible.value = false;
  mobileNavVisible.value = !mobileNavVisible.value;
};

// 切换显示个人中心导航栏
const profileNavVisible = ref(false);
const clickUserLogo = () => {
  profileNavVisible.value = !profileNavVisible.value;
  mobileNavVisible.value = false;
  mobileLanguageNavVisible.value = false;
};

const { $emits, $on } = useNuxtApp();
// 监听消息通知栏显示
$on("bell-nav-show", () => {
  mobileNavVisible.value = false;
  mobileLanguageNavVisible.value = false;
  profileNavVisible.value = false;
});
watchEffect(() => {
  if (process.client) {
    const appHeader = document.querySelector("#app-header") as HTMLElement;
    if (appHeader) {
      if (
        mobileNavVisible.value ||
        mobileLanguageNavVisible.value ||
        profileNavVisible.value
      ) {
        // document.body.classList.add("no-touch");
        appHeader.style.position = "fixed";
        document.body.style.paddingTop = "var(--yd-header-height)";
        // 显示其他导航栏
        $emits("other-nav-show");
      } else {
        // document.body.classList.remove("no-touch");
        document.body.style.paddingTop = "0";
        appHeader.style.position = "sticky";
      }
    }
  }
});

const resetVisible = () => {
  mobileNavVisible.value = false;
  mobileLanguageNavVisible.value = false;
  profileNavVisible.value = false;
};

const windowClickCloseVisible = () => {
  mobileNavVisible.value = false;
  mobileLanguageNavVisible.value = false;
  profileNavVisible.value = false;
};
onMounted(() => {
  window.addEventListener("click", windowClickCloseVisible);
  window.addEventListener("resize", resetVisible);
});
onBeforeUnmount(() => {
  window.removeEventListener("click", windowClickCloseVisible);
  window.removeEventListener("resize", resetVisible);
});
</script>
<style scoped lang="less">
.mobile-nav {
  display: flex;
  align-items: center;
  gap: 123px;

  .mobile-header-icon,
  .user-logo img.logo {
    width: 123px;
    height: 123px;
  }
}
</style>
